<template>
  <div>
    <el-radio-group
      v-model="radio1"
      size="large"
      @change="typeChange"
      style="width: 100%; margin-bottom: 10px"
    >
      <el-radio-button label="组织架构" value="New York" />
      <el-radio-button label="角色" value="Washington" />
    </el-radio-group>
    <div class="main-div" v-if="radio1 == '组织架构'">
      <div class="transfer-div">
        <div class="title-div">组织架构</div>
        <div class="body-div">
          <el-input
            :prefix-icon="Search"
            v-model="filterTextLeft"
            style="margin-bottom: 9px"
            placeholder="请输入搜索内容"
          />
          <el-tree
            ref="treeRef"
            class="filter-tree"
            @check-change="checkChange"
            :data="props.dataAll"
            :check-strictly="true"
            :props="defaultProps"
            node-key="id"
            @node-click="handleNodeClick"
            default-expand-all
            show-checkbox
            :check-on-click-node="true"
            :filter-node-method="filterNode"
          />
        </div>
      </div>

      <div class="transfer-div">
        <div class="title-div">
          已选数据 <el-button type="danger" @click="clear">清空</el-button>
        </div>
        <div class="body-div">
          <div v-for="(item, index) in list" :key="index" class="item">
            <div>{{ item.label }}</div>
            <div>
              <el-icon color="#e33d30" @click="deletChange(index)">
                <DeleteFilled />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-div" v-if="radio1 == '角色'">
      <div class="transfer-div">
        <div class="title-div">角色</div>
        <div class="body-div">
          <el-input
            :prefix-icon="Search"
            v-model="filterTextLeft"
            style="margin-bottom: 9px"
            placeholder="请输入搜索内容"
          />
          <el-checkbox-group v-model="checkRole" @change="roleChange">
            <el-checkbox
              v-for="(item, index) in props.roleList"
              :key="index"
              :label="item.id"
              >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div class="transfer-div">
        <div class="title-div">
          已选数据 <el-button type="danger" @click="clear2">清空</el-button>
        </div>
        <div class="body-div">
          <div v-for="(item, index) in list2" :key="index" class="item">
            <div>{{ item.label }}</div>
            <div>
              <el-icon color="#e33d30" @click="deletRoleChange(index)">
                <DeleteFilled />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch, defineProps, defineEmits } from "vue";
import { Search } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();

// const props = defineProps(["dataAll", "checkedIds", "titles"]);
const props = defineProps({
  disabled: { type: Boolean, default: false },
  roleList: {
    type: Array,
    default: () => [],
  },
  dataAll: {
    type: Array,
    default: () => [],
  },
  // 物料编码
  checkedIds: {
    type: Array,
    default: () => [],
  },
  titles: {
    type: Array,
    default: () => [],
  },
});
const filterTextLeft = ref("");
const filterTextRight = ref("");
const treeRef = ref();
const treeRefRight = ref();
const checkedLeft = ref(false);
const checkedRight = ref(false);
const defaultProps = {
  children: "children",
  label: "label",
};

const radio1 = ref("组织架构");
const list = ref([]);
const list2 = ref([]);

const checkRole = ref([]);
watch(filterTextLeft, (val) => {
  treeRef.value?.filter(val);
});
watch(filterTextRight, (val) => {
  treeRefRight.value?.filter(val);
});
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
const checkList = ref([]);

const roleChange = async (v) => {
  console.log();
  if (list.value.length != 0) {
    const isif = await proxy.MessageBox(
      "已选择组织架构，是否要选择角色，如果选择角色，组织架构已选中数据会清空"
    );
    if (isif) {
      list.value = [];
    } else {
      return;
    }
  }
  list2.value = props.roleList.filter((t) => v.includes(t.id));
};

/**删除某一项  list.splice(index, 1)*/
const deletChange = (index) => {
  list.value.splice(index, 1);
  treeRef.value.setCheckedKeys(list.value.map((t) => t.id));
};
const deletRoleChange = (index) => {
  list.value.splice(index, 1);
  checkRole.value = list.value.map((t) => t.id);
};
const dataLeft = ref([]);
const dataRight = ref([]);
const emit = defineEmits(["changeChecked"]);

/**当选择部门 */

const checkChange = async (data, checked, indeterminate) => {
  if (list2.value.length != 0) {
    const isif = await proxy.MessageBox(
      "已选择角色，是否要选择组织架构，如果选择组织架构，角色已选中数据会清空"
    );
    if (isif) {
      list2.value = [];
    } else {
      return;
    }
  }
  list.value = treeRef.value.getCheckedNodes();
};

//穿梭
const filterTreeData = (treeData, checkList, flag) => {
  return treeData.filter((node) => {
    if (checkList.includes(node.id)) {
      return flag;
    } else if (node.children) {
      node.children = filterTreeData(node.children, checkList, flag);
      return node.children.length > 0;
    }
    return !flag;
  });
};

/**清空 */
const clear = async () => {
  const isif = await proxy.MessageBox("确定清空已选择的组织架构吗");
  if (!isif) return;
  list.value = [];
  treeRef.value.setCheckedKeys(list.value.map((t) => t.id));
};
/**清空 */
const clear2 = async () => {
  const isif = await proxy.MessageBox("确定清空已选择的角色吗");
  if (!isif) return;
  list2.value = [];
  checkRole.value = list.value.map((t) => t.id);
};
//选中
const handleNodeClick = (nodeData) => {
  nodeData.selected = !nodeData.selected;
};

// 递归获取所有节点的 id
const getAllNodeIds = (node, ids) => {
  ids.push(node.id);
  if (node.children) {
    node.children.forEach((child) => {
      getAllNodeIds(child, ids);
    });
  }
};

/**切换tab */
const typeChange = () => {};

/*提交*/
const submit = () => {
  if (list.value.length == 0 && list2.value.length == 0) {
    proxy.warningMsg("请选择下发人员");
    return false;
  }
  if (list.value.length != 0) {
    console.log(list.value, "list.value");
    return {
      type: 1,
      issueIds: list.value.map((t) => t.id),
    };
  }
  if (list2.value.length != 0) {
    console.log(list.value, "list.value");
    return {
      type: 2,
      issueIds: list2.value.map((t) => t.id),
    };
  }
};

onMounted(() => {
  checkList.value = [...props.checkedIds];
});

defineExpose({ submit });
</script>
<style scoped lang="scss">
.selected {
  background-color: rgb(14, 27, 31);
}

.main-div {
  display: flex;
  width: 100%;
  height: 400px;
  align-items: center;
  justify-content: space-around;
}

.transfer-div {
  display: inline-block;
  width: calc(50% - 80px);
  height: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
}

.title-div {
  background: #f5f7fa;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px;
}

::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  width: 100% !important;
}

::v-deep .el-radio-button {
  width: 50% !important;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  width: 100% !important;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  width: 100% !important;
}

::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
}

.body-div {
  padding: 12px;
  overflow: auto;
  height: calc(100% - 40px);
}

.button-transfer {
  display: inline-block;
  width: 160px;
  text-align: center;

  .button-div {
    width: 46px;
    height: 36px;
    border-radius: 2px;
  }

  .el-button + .el-button {
    margin-left: 8px;
  }
}

.item {
  padding: 5px;
  border: 1px solid rgb(180, 170, 170);
  border-radius: 5px;
  width: 50%;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-tree {
  height: calc(100% - 70px);
  overflow: auto;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

:deep .is-penultimate > .el-tree-node__content {
  color: #626aef;
}
</style>